<template>
    <div>
        <div class="contentmd">
            <div v-html="content" class="markdown-body html-content"></div>
        </div>
        <!--版权信息-->
        <div class="blog-message">
            <ul class="list" >
                <li>作者：coder-msc （微信右下角）
                   <!-- <router-link style="text-decoration-line: none;" to="/about">（联系作者）</router-link>-->
                </li>
                <li>发表时间：{{ createTime }}</li>
                <li>最后修改：{{ updateTime }}</li>
                <li>本站点采用<a href="https://creativecommons.org/licenses/by/4.0/" style="text-decoration-line: none;"
                            target="_blank"> 署名 4.0 国际 (CC BY 4.0) </a>创作共享协议。可自由转载、引用，并且允许商业性使用。但需署名作者且注明文章出处。
                </li>
            </ul>
        </div>
        <div>
            <Comment></Comment>
        </div>
    </div>
</template>

<script>
    import "github-markdown-css"
    import hljs from 'highlight.js'
    import 'highlight.js/styles/atom-one-light.css' //引入一种语法的高亮
    import {
        marked
    } from 'marked'
    // import Comment from "@/components/Comment";

    export default {
        name: "About",
        components: {
            Comment: () => import('@/components/Comment')
        },
        data() {
            return {
                treeData: [],
                defaultProps: {
                    label: 'text',
                    children: 'children',
                },
                textData: "",
                title: "",
                createTime: "",
                updateTime: ""
            }
        },
        created() {
            this.getBlog()
        },
        computed: {
            content() {
                this.getBlog()
                return marked(this.textData)
            }
        },
        methods: {
            getBlog() {
                const _this = this
                this.$axios.get('/about').then(res => {
                    const blog = res.data.data
                    _this.textData = blog.content
                    _this.title = blog.title
                    _this.createTime = blog.createTime
                    _this.updateTime = blog.updateTime
                })
            }
        }
    }
</script>

<style>

    .contentmd {
        display: flex;
        /* padding: 30px; */
        overflow: hidden;
        height: 100vh;
        width: 61.5vw;
        padding-bottom: 10px;
    }

    .tree {
        margin-right: auto;
        overflow-y: auto;
        width: 13vw;
        height: 60vh;
        flex-shrink: 0;
        margin-left: 1vw;
    }

    .html-content {
        overflow-y: auto;
        background-color: white;
    }

    .blog-message {
        text-align: left;
        background-color: honeydew;
        padding: 10px 5px 10px 5px;
        font-size: 14px;
        width: 60.8vw;

    }


</style>
